<template>

  <div>
    <el-descriptions title="设备信息列表" :column="3" border>
      <el-descriptions-item
        label="设备编号："
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ baseList.number }}</el-descriptions-item
      >
      <el-descriptions-item label="项目名称：">
        <el-button
          @click="hankFacilityProject(baseList.projectid)"
          type="text"
          size="big"
          >{{ baseList.projectName }}</el-button
        >
      </el-descriptions-item>
      <el-descriptions-item label="位置：">{{
        baseList.address
      }}</el-descriptions-item>
      <el-descriptions-item label="厂家：">{{
        baseList.manufactors
      }}</el-descriptions-item>
      <el-descriptions-item label="联网方式：">{{
        baseList.models
      }}</el-descriptions-item>
      <el-descriptions-item label="设备类型：">{{
        baseList.types
      }}</el-descriptions-item>
      <el-descriptions-item label="蓝牙：">{{
        baseList.types
      }}</el-descriptions-item>
      <el-descriptions-item label="IMIE编码：">{{
        baseList.brack1
      }}</el-descriptions-item>
      <el-descriptions-item label="设备开关：">
        <el-tag size="small" v-if="baseList.status === 1" type="success"
          >已启用</el-tag
        >
        <el-tag size="small" v-else-if="baseList.status === 0" type="danger"
          >已禁用</el-tag
        >
      </el-descriptions-item>

      <el-descriptions-item label="备注">
        <el-tag size="big">学校</el-tag>
      </el-descriptions-item>
      <!-- :contentStyle="{ 'text-align': 'right' }" -->
      <el-descriptions-item label="联系地址">{{
        baseList.projectAddress
      }}</el-descriptions-item>

      <el-descriptions-item label="硬件状态1：">{{
        baseList.address
      }}</el-descriptions-item>

      <el-descriptions-item label="硬件状态1：">{{
        baseList.address
      }}</el-descriptions-item>

      <el-descriptions-item label="硬件状态1：">{{
        baseList.address
      }}</el-descriptions-item>

      <el-descriptions-item
        label="使用记录"
        type="button"
        :contentStyle="{ color: '#409EFF' }"
      >
        <el-button
          @click="hankFacilityOrder(baseList.address)"
          type="text"
          size="big"
          >{{ baseList.address }}</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
    <h4>设备工作类型</h4>
    <div>
      <el-table :data="tabledatas" border>
         
            <el-table-column label="扫码可见">
          <template slot-scope="scope">
            <el-input
              placeholder="扫码可见"
              v-show="show"
              v-model="scope.row.tab0"
            ></el-input>
             <!-- <span v-show="!show">{{ scope.row.tab0 }}</span> -->
            <el-switch v-model="scope.row.tab0"></el-switch>
          
          </template>
        </el-table-column>
          <el-table-column label="扫码可见文字">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.functionStatus"
            ></el-input>
           <span v-show="!show">{{ scope.row.functionStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.functionType"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                 
              
                  <div class="el-input el-input--medium"> 
                   <input type="text" autocomplete="off" class="el-input__inner"  v-model="scope.row.functionType">
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
        <el-table-column label="时长">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.functionTime"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                 
              
                  <div class="el-input el-input--medium"> 
                   <input type="number" autocomplete="off" class="el-input__inner"  v-model="scope.row.functionTime">
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
        <el-table-column label="价格（元）">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.money"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                  <span role="button" class="el-input-number__decrease">
                      <i class="el-icon-minus" v-on:click="subtract(scope.row.money)"></i>
                  </span >
                 <span role="button" class="el-input-number__increase">
                     <i class="el-icon-plus" v-on:click="add(scope.row.money)"></i>
                 </span>
                  <div class="el-input el-input--medium">
                    <!----><input
                      type="text"
                      autocomplete="off"
                      max="Infinity"
                      min="0"
                      v-model="scope.row.money"
                      id="scope.row.tab2"
                      class="el-input__inner"
                      role="spinbutton"
                      aria-valuemax="Infinity"
                      aria-valuemin="0"
                      aria-valuenow="2"
                      aria-disabled="undefined"
                    />
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
              v-model="scope.row.describes"
            ></el-input>
              <div class="el-input el-input--medium"> 
                    <input type="text" autocomplete="off" class="el-input__inner"  v-model="scope.row.describes">
              </div>
          </template>
        </el-table-column>
        
      </el-table>
      <!-- <el-button @click="show = true">编辑</el-button> -->
      <el-button @click="FunctionSubim()">提交</el-button>
    </div>
  </div>
</template>

<style>
.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
</style>
<script>
export default {
  name: "FacilityBase",
  data() {
    return {
      number: this.$route.params.number, //这样我们的id就拿到了然后在接口处拼接
      baseList: [],
      tabledatas: [
      
      ],
      show: false,
    };
  },
  created() {
    this.infobase();
  },
  methods: {
      add:function(count){
        //var modal = weex.requireModule(count);
        //console.log(count)
        const countmath=count-0;
        try{
          this.tabledatas.forEach(function(index, item){
            //console.log(index)
            const countmaths=index.money-0
            //console.log(countmaths)   
            //console.log(countmaths==countmath.toFixed(2))
            if(countmaths==countmath.toFixed(2)){
                index.money=(countmaths+0.10).toFixed(2);
                throw new Error("EndIterative");
            }
            
          });
        }catch(e){

        }
       

        
       },
        subtract:function(count){
              //console.log(count)
        const countmath=count-0;
        try{
          this.tabledatas.forEach(function(index, item){
            //console.log(index)
            const countmaths=index.money-0
            //console.log(countmaths)   
            //console.log(countmaths==countmath.toFixed(2))
            if(countmaths==countmath.toFixed(2)){
                if((countmaths-0.10).toFixed(2)<=0){
                    
                  this.$message({
                    message: '当前金额最低，不能在减了！！！',
                    type: 'warning'
                  });
                }else{
                  index.money=(countmaths-0.10).toFixed(2);
                  //index.tab2=index.tab2+0.10;
                  //alert("- "+index.money) 
                }
                
                //break;
                	throw new Error("EndIterative");
            }
            
          });
        }catch(e){

        }
          // if (count<=0){
          //   alert('受不了啦，宝贝不能再减少啦')
          //   count=0;
          // }else {
          //   count=count-0.1;
          // }
          //  alert("- "+count)
        },

///  查询设备基础的信息
    infobase() {
      this.$axios
        .get("/tFacilityBase/list", {
          params: {
            page: 0,
            limit: 5,
            type: null,
            model: null,
            math: this.$route.params.number,
            projectid: null,
            address: null,
          },
        })
        .then((res) => {
          //console.log(res);
          this.baseList = res.data.data[0];
          this.infoFunction()
        });
    },
    /// 查询设备下模式的基础明细 的信息
    infoFunction(){
      const id =this.baseList.id
      this.$axios.get("/BaseInfoController/infoFunction/"+id)
        .then((res) => {
          console.log(res);
          this.tabledatas = res.data.data;
          
          console.log(this.tabledatas);
        });
    },
    // 点击提交  用户洗衣机洗护类型按钮
    FunctionSubim(){
       console.log(this.tabledatas);
        this.$axios.post("/tFacilityFunction/FunctionSubim",this.tabledatas)
        .then((res) => {
          //console.log(res);
          //this.tabledatas = res.data.data;
           this.$message({
                    showClose: true,
                    message: "恭喜你，操作成功",
                    type: "success",
                   
                  });
          //console.log(this.tabledatas);
        });
    },
    /// 点击到这个设备的一个项目明晰
    hankFacilityProject(row) {
      alert(row);
    },
    /// 点击到这个设备的一个使用订单记录
    hankFacilityOrder(row) {
      alert(row);
    },
  },
};
</script>

<style scoped>
</style>